import React, { Component } from 'react'

import { Table, Image, Button } from 'antd'

import './index.less'

const dataSource = []
for (let i = 0; i < 14; i++) {
  dataSource.push({
    key: i,
    id: i,
    name: `Edward King ${i}`,
    price: 32,
    number: i,
    picture:
      'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AARdJbM.img?h=534&w=799&m=6&q=60&o=f&l=f',
  })
}

const columns = [
  {
    title: '商品图片',
    dataIndex: 'picture',
    key: 'picture',
    render: (text) => <Image width={100} src={text} alt="" />,
  },
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '单价(元)',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '数量(件)',
    dataIndex: 'number',
    key: 'number',
  },

  {
    title: '删除',
    dataIndex: 'id',
    key: 'id',
    render: (text) => (
      <span style={{ cursor: 'pointer', color: '#0D7F85' }}>删除</span>
    ),
  },
]

class ShopCart extends Component {
  state = {
    selectedRowKeys: [], // 选择中的商品
  }

  start = () => {
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
      })
    }, 1000)
  }

  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys)
    this.setState({ selectedRowKeys })
  }

  render() {
    const { selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    }
    return (
      <div id="shopCart">
        <h3 className="header">我的购物车</h3>
        <div className="search-result-list body">
          <Table
            rowSelection={rowSelection}
            dataSource={dataSource}
            columns={columns}
            pagination={{ position: ['bottomLeft'] }}
          />
        </div>
        <div class="footer">
          <ul>
            <li>
              <Button type="primary" danger>
                删除选中商品
              </Button>
            </li>
            <li>
              已选择
              <i>1</i>
              件商品
            </li>
            <li style={{ fontWeight: 'bold' }}>&nbsp;总价</li>
            <li>
              95<i style={{ fontSize: 15 }}>（元）</i>
            </li>
            <li>
              <Button type="primary" danger>
                结算
              </Button>
            </li>
          </ul>
        </div>
      </div>
    )
  }
}

export default ShopCart
